<template>
	<view class="choosePackageCardPage">
		<view class="withdrawalRecordsTop">
			<view class="search-content">

				<image class="search-img" src="../../../static/会员卡管理端/组合 405.png" mode=""></image>
				<input placeholder="请输入套餐卡名称" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
			</view>
		</view>
		<view class="choosePackageCardList">
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<block v-for="(item,index) in list" :key="index">

					<view class="packageCardArr" @click="rechargeFn(item)"
						:style="{ '--bg-image': `url(${item.style})` }">
						<view class="flex-between "
							style="border-bottom: 1px solid rgba(255, 255, 255, 0.25);padding-bottom: 20rpx;">

							<image class="avatar" :src="item.logo" mode=""></image>

							<view class=" flex-column-between-start ">
								<text class="font-overflow centerText price font-weight_bold">
									{{item.name}}
								</text>
								<text class="font-overflow centerText price font-weight_bold">{{item.desc}} </text>

							</view>

							<view class="rechargeBtn flex">
								购卡
							</view>

						</view>
						<view class="margin-top_20rpx">
							<text
								class="font-overflow centerText  priceText font-weight_bold margin-right_16rpx">已有{{item.sales_volume}}人付款</text>
							<text
								class="font-overflow centerText  priceText font-weight_bold">充值金额：{{item.sales_amount}}</text>
						</view>

					</view>

				</block>
			</mescroll-body>
		</view>
		<!-- 购买套餐弹框 -->

		<sunui-popup ref="buyPackagePopup">
			<template v-slot:content>

				<view class="buyPackagePopupContain ">
					<view class="top flex-end">


						<uni-icons @click='closeBuyPackagePopup' class="uniIcon" type="closeempty" size="20"
							style="color: #07070791;">
						</uni-icons>
					</view>
					<view style="font-size: 36rpx;font-weight: 600;">
						{{packageCardInformation.name}}{{'('+packageCardInformation.number+')'}}
					</view>
					<view style="margin: 20rpx 0;color: rgb(102, 102, 102);font-size: 24rpx;">
						{{packageCardInformation.desc}}
					</view>
					<!-- 选择套餐 -->
					<view class="packagePop">
						<view class="flex-start-center">
							<view class="packageTitle">

							</view>
							<view>
								选择套餐
							</view>
						</view>
					</view>
					<!-- 套餐内容 -->
					<view class="flex-wrap">
						<view class="packagePopConent flex-column">
							<view class="packageColor">
								￥{{packageCardInformation.price}}
							</view>
							<view style="color: rgb(51, 51, 51);font-size: 24rpx;font-weight: 400;">
								{{packageCardInformation.number}}次套餐卡
							</view>
							<!-- 	<view class="sign flex">
								再送5次
							</view> -->
						</view>


					</view>
					<!-- 说明介绍 -->
					<view class="packagePop" style="margin-top: 36rpx;">
						<view class="flex-start-center">
							<view class="packageTitle">

							</view>
							<view>
								说明介绍
							</view>

						</view>
						<view style="margin-top: 20rpx;" v-html="packageCardInformation.remark">

						</view>
					</view>
					<!-- 立即购卡 -->
					<view class="buyCard flex " @click="buyPackageCard()">
						立即购卡
					</view>
				</view>

			</template>
		</sunui-popup>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				searchVal: '',
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				// 购买套餐卡信息
				packageCardInformation: null,
				deductionType: null,
				signParams: null
			}
		},
		onLoad(options) {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
			this.signFn()
			this.deductionType = options
		},
		onShow() {
			this.mescroll?.resetUpScroll();

		},
		methods: {
			async signFn() {
				const result = await this.$http.post({
					url: this.$api.sign,
					data: {
						url: window.location.href.split('#/')[0]


					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					this.signParams = result.data

				} else {
					this.$sun.toast(result.msg, 'none')
				}
			},
			changeInput(e) {
				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.packageList,
					data: {
						page: scroll.num,
						limit: 10,
						status: 1,
						name: this.searchVal
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
			},

			// 领取优惠券
			rechargeFn(item) {
				this.packageCardInformation = item
				this.deductionType.cardId = item.id
				this.deductionType.price = item.price
				console.log('12313')
				this.$refs.buyPackagePopup.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: true, //false使用户不能点击其它关闭页面
					topclose: false,
					zIndex: 99999
				});

			},
			// 关闭领取优惠券弹框
			closeBuyPackagePopup() {
				this.$refs.buyPackagePopup.close()
			},
			buyPackageCard() {
				console.log(this.deductionType)
				this.$refs.buyPackagePopup.close()
				this.$wx.config({
					debug: false,
					appId: this.signParams.appId,
					timestamp: this.signParams.timestamp,
					nonceStr: this.signParams.noncestr,
					signature: this.signParams.sign,
					jsApiList: [
						'updateAppMessageShareData',
						'updateTimelineShareData',
						'onMenuShareTimeline',
						'onMenuShareAppMessage',
						'onMenuShareQQ',
						'onMenuShareWeibo',
						'wx-open-launch-weapp',
						'getLocation',
						'checkJsApi',
						'chooseContact',
						'scanQRCode'
					],
					openTagList: ['wx-open-launch-weapp']
				});

				this.$wx.ready(() => {
					this.$wx.checkJsApi({
						jsApiList: ['scanQRCode'],
						success: res => {
							if (res.checkResult.getLocation == false) {
								alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！' +
									JSON.stringify(res));
								return;
							}
							// alert('成功！' + JSON.stringify(res));
						},
						fail: res => {
							// alert('失败！' + JSON.stringify(res));
						},
						complete: res => {

							// alert('所有' + JSON.stringify(res));
						}
					});

					this.$wx.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode",
							"barCode"
						], // 可以指定扫二维码还是一维码，默认二者都有
						success: (res) => {
							// 当needResult 为 1 时，扫码返回的结果
							let result = res.resultStr;

							// 切割 URL 字符串以获取查询部分
							// 首先找到问号 '?' 后面的部分，这部分包含了查询参数
							const queryPart = result.split('?')[1];

							// 使用URLSearchParams来解析查询字符串
							const searchParams = new URLSearchParams(queryPart);

							// 将参数转化为对象
							const paramsObject = {};
							for (const [key, value] of searchParams.entries()) {
								paramsObject[key] = value;
							}

							this.$sun.navGo('/pages/cashierSystem/deductionType/deductionType', {
								...this.deductionType,
								...paramsObject
							})


						},
						fail: function(res) {
							console.log('扫描失败!' + res.errMsg);
							alert('扫描失败' + JSON.stringify(res));
						}
					});

				});


			}
		}
	}
</script>

<style lang="less" scoped>
	.buyPackagePopupContain {
		background-color: #fff;
		height: 58vh;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 30rpx;

		.packagePop {
			margin-bottom: 30rpx;

			.packageTitle {
				width: 8rpx;
				height: 30rpx;
				background: rgb(255, 0, 0);
				margin-right: 10rpx;
			}
		}

		.packagePopConent {
			width: 212rpx;
			height: 146rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			box-sizing: border-box;
			border: 2rpx solid rgb(255, 167, 167);
			border-radius: 20rpx;
			position: relative;
			background: rgb(255, 249, 249);

			.sign {
				padding: 8rpx;
				top: -10rpx;
				left: -10rpx;
				position: absolute;

				height: 40rpx;
				color: rgb(255, 255, 255);

				font-size: 24rpx;
				font-weight: 400;
				border-radius: 12rpx;

				background: rgb(255, 0, 0);
			}
		}

		.packageColor {
			color: rgb(255, 0, 0);
			font-size: 40rpx;
			font-weight: 600;
		}

		.packageColor-noActive {
			color: rgb(51, 51, 51);
			font-size: 40rpx;
			font-weight: 600;
		}

		.packagePopConent-noActive {
			width: 212rpx;
			height: 146rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			box-sizing: border-box;
			border: 1px solid rgb(225, 225, 225);
			border-radius: 10px;

			background: rgb(255, 255, 255);
		}

		.buyCard {
			border-radius: 154rpx;
			width: 600rpx;
			height: 88rpx;
			background: rgb(239, 93, 49);
			color: rgb(255, 255, 255);
			position: fixed;
			bottom: 20rpx;
			font-size: 32rpx;
			font-weight: 500;
			margin-left: 55rpx;
		}

	}

	.choosePackageCardPage {
		.withdrawalRecordsTop {

			background: rgb(255, 255, 255);

			padding: 34rpx;

			// border-radius: 130rpx;


			.search-content {
				justify-content: center;
				display: flex;
				align-items: center;
				// width: 446rpx;
				height: 88rpx;
				margin-right: 24rpx;
				background: rgb(246, 248, 255);
				;
				border-radius: 84rpx;
				width: 100%;

				.search-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					margin-left: 40rpx;
				}

				.icon_close {
					padding: 0rpx 15rpx;
					width: 36rpx;
					height: 36rpx;
					margin-right: 30rpx;
				}

			}
		}

		.choosePackageCardList {
			padding: 30rpx;

			.packageCardArr {
				position: relative;
				margin-bottom: 22rpx;
				padding: 25rpx 20rpx;
				height: 108px;
				border-radius: 20rpx;
				background-repeat: no-repeat;
				background-size: cover;

				background-image: (var(--bg-image));


				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;

				}

				.rechargeBtn {
					width: 110rpx;
					height: 52rpx;
					border-radius: 20rpx;

					background: rgb(255, 255, 255);
				}

				.centerText {
					width: 438rpx;
				}

				.price {
					color: #fff;
					font-size: 30rpx;
					font-weight: 700;
				}

				.priceText {
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					font-weight: 400;
				}
			}

			.packageCardArr::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				background: rgba(0, 0, 0, 0.1);
				/* 半透明黑色背景 */
			}
		}

	}

	page {
		background: #f6f6f6;
	}
</style>